<template>
	<div class="select-address-main">
    <div class="noAddress" v-if="addressList == null || addressList.length == 0">
      <img src="../assets/image/empty-@2x.png"/>
      <p>什么都没有</p>
    </div>
		<!--选择地址-->
		<div class="selectaddress" v-if="addressList.length > 0">
			<ul>
				<li class="addressli" v-for="(item,index) in addressList" >
					<a class="addressli_main" @click="addressContent(item)">
						<div class="fix">
							<div class="addressli_name fl">{{item.consignee}}</div>
							<div class="addressli_phone fr">{{item.mobile}}</div>
						</div>
						<div class="addressli_address">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</div>
					</a>
					<div class="addressli_main fix">
            <label class="addressli_setdefault fl clearfix"  @click="defaultChange(item,index)"><input type="radio" name="rad" :value="index" v-model="addIndex" class="fl"><span class="select_icon fl"></span><i class="fl">设为默认</i></label>
						<a class="addressli_delete fr fix" @click="confirmDelete(item,index)">
							<img class="addressli_icon fl" src="../assets/image/ico_delete_black@2x.png">
							<p class="addressli_p fr">删除</p>
						</a>
						<a class="addressli_compile fr fix" @click="editAdd(item)">
							<img class="addressli_icon fl" src="../assets/image/ico_compile@2x.png">
							<p class="addressli_p fr">编辑</p>
						</a>
					</div>
				</li>
			</ul>
		</div>
		<!--新增地址-->
		<router-link :to='{path:"addAddress"}' class="newaddress fix" v-if=" addressList.length < 10">
			<img class="newaddress_img fl" src="../assets/image/add_white@2x.png">
			<div class="newaddress_describe fl">新增地址</div>
		</router-link>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'

export default {
	name: 'app',
	data () {
		return {
      addressList:[],
      addIndex:null,
		}
	},
  beforeMount:function () {
    this.$nextTick(function () {
      this.findConsignee();
    })
  },
	methods:{
    findConsignee:function(){
      var _this = this;
      this.token = (window.localStorage.getItem("token") || '[]');
      this.$http.post(Util.ajaxPath.devOrderUrl+'shop-order/oms/api/findConsignee',{token:this.token},{emulateJSON : true}).then(function (res) {
        if(res.body.code == "10009"){
          alert("请登录！");
        }else if(res.body.code == "13000"){
          _this.addressList = res.body.content;
            _this.addressList.forEach(function (item,index) {
              if(item.isDefault == 1){
                _this.addIndex = index;
              }
            });
        }
      });
    },
    confirmDelete:function (item,index) {
      if (confirm("确认要删除该地址吗？")){
          var _this = this;
        this.$http.post(Util.ajaxPath.devOrderUrl+'shop-order/oms/api/delConsignee',{token:this.token,consigneeId:item.id},{emulateJSON : true}).then(function (res) {
         if(res.body.code == 13000){
           _this.addressList.splice(index,1);
           this.findConsignee();
         }
        });
      }else{

      }
    },
    defaultChange:function (item,index) {
       this.addIndex = index;
       var _this = this;
      this.addressList.forEach(function (item,index) {
        _this.$set(item,"isDefault",0);
      });
      this.$set(item,"isDefault",1);
    },
    editAdd:function (item) {
      var editMsg = {"token":this.token,"consignee":item.consignee,"provinceId":item.provinceId,"province":item.province,"cityId":item.cityId,"city":item.city,"districtId":item.districtId,"district":item.district,"address":item.address,"mobile":item.mobile,"id":item.id,"isDefault":item.isDefault};
      localStorage.setItem("editMsg",JSON.stringify(editMsg));
      this.$router.push('editAddress');
    },
    addressContent:function (item) {
      var addressCon = {"province": item.province, "city": item.city, "district": item.district, "provinceId": item.provinceId, "cityId": item.cityId, "districtId": item.districtId, "address": item.address, "consignee": item.consignee, "mobile": item.mobile};
      Util.ajaxPath.setCookie("addressCon",JSON.stringify(addressCon));
      this.$router.push('confirmOrder');
    }
	},
}
</script>
<style lang="scss">
.select-address-main{
.noAddress{
  padding-top:3.5rem;
  img{width: 2.5rem; height: 2.5rem; margin: 0 auto;}
  p{margin-top:0.3rem; font-size: 0.24rem; line-height: 0.24rem; text-align: center; color: #000;}
}
  .selectaddress{padding-bottom: 1rem;}
  .addressli{ background: #fff; border-bottom: 0.2rem solid #f4f5f5; }
  .addressli_main{
    padding: 0 0.3rem; position: relative; display: block;
    +.addressli_main{ border-top: 2px solid #f4f5f5; }
  }
  .addressli_name{ padding-top: 0.3rem; height: 0.28rem; line-height: 0.28rem; font-size: 0.28rem; color: #333; }
  .addressli_phone{ padding-top: 0.3rem; height: 0.3rem; line-height: 0.3rem; font-size: 0.3rem; color: #333; }
  .addressli_address{ padding: 0.1rem 0; line-height: 0.46rem; font-size: 0.26rem; color: #747474; }
  .addressli_setdefault{
    height: 0.88rem;
    input{opacity: 0; position: absolute; z-index: -1;}
    input+span{ display: inline-block; height: 0.32rem; width: 0.32rem; background:url("../assets/image/unselected@2x.png")no-repeat;background-size: 0.32rem 0.32rem;}
    input:checked+span { background:url("../assets/image/select@2x.png")no-repeat;background-size: 0.32rem 0.32rem;}
    span{ margin:0.28rem 0.2rem 0 0;}
    i{height: 0.88rem; line-height: 0.88rem; font-size: 0.24rem; color: #747474;}
  }
  .addressli_delete{ margin: 0.3rem 0 0 0.36rem; width: 0.94rem; }
  .addressli_icon{ display: block; width: 0.28rem; height: 0.28rem; }
  .addressli_p{ height: 0.28rem; line-height: 0.28rem; font-size: 0.24rem; color: #333; }
  .addressli_compile{	margin: 0.3rem 0 0 0; width: 0.94rem; }
  .newaddress{ width: 100%; height: 0.98rem; background: linear-gradient(to right,#fe4a6b,#e8163f); position: fixed; left: 0; bottom: 0; z-index: 20; }
  .newaddress_img{ display: block; padding: 0.32rem 0.2rem 0 2.88rem; width: 0.34rem; height: 0.34rem; }
  .newaddress_describe{ line-height: 0.98rem; font-size: 0.3rem; color: #fefefe; }
}
</style>
